import styled from 'styled-components'
export const Details = styled.div`
display:flex;
flex-wrap:wrap;
position:relative;
.header{
    height:1.66rem;

    /* border:1px solid red; */
    img{
         /* height:1.66rem; */
         width:3.75rem;
         background-color: rgba(0, 0, 0, 0.5);
    }
    .mask{
          position: absolute;
        left: 0%;
        top: 0%;
        width: 100%;
        height: 5rem;
        background-color: rgba(0, 0, 0, 0.6);
    }
}
.title{
        width:3.75rem;
        height:2.1rem;
     img{
          width:1.2rem;
          height:1.5rem;
          position:absolute;
          left:0.5rem;
          top:1.25rem;
     }
     .info{
          strong{
               position:absolute;
               top:1.8rem;
               left:2.1rem;
               font-size:0.18rem;
               color:#fff;
          }
          .author-name{
               position:absolute;
               top:2.2rem;
               left:2.1rem;
               font-size:0.15rem;
               color:#fff;

          }
          .comic-style{
               position:absolute;
               font-size:0.15rem;
               top:2.5rem;
               left:2.1rem;
               color:#fff;

          }
          .comic-intro{
               width:3.4rem;
               position:absolute;
               top:3rem;
               left:0.16rem;
               color:#fff;

          }
     }
   }
.newest-chapter{
     border-top:1px solid #ccc;
     height:0.67rem;
     width:3.75rem;
     position: relative;
     .newest-top{
          span{
               &:nth-of-type(1){
                    font-weight:bold;
                    position:absolute;
                    top:0.1rem;
                    left:0.15rem;
                   color:#fff;

               }
               &:nth-of-type(2){
                    position:absolute;
                    top:0.1rem;
                    left:0.9rem;
                      color:#fff;

               }
          }
          a{
               position:absolute;
               top:0.1rem;
               left:2.95rem;

          }
     }
     .update-time{
          margin-left:0.15rem;
          margin-top:0.35rem;
          color:#fff;

     }
}
.comment-content{
     border-top:1px solid #ccc;
     height:0.3rem;
     width:3.75rem;
     position: relative;
     span{
          font-weight:bold;
          position:absolute;
          left:0.15rem;
          top:0.05rem;
          color:#fff;

     }
     a{
          position:absolute;
          left:2.95rem;
          top:0.05rem;
     }
}
.comment-content2{
     height:0.8rem;
     width:3.75rem;
     position: relative;
     span{
          &:nth-of-type(1){
          position:absolute;
          top:0.02rem;
          left:0.05rem;
          font-size:0.16rem;
          color:#fff;
          }
          &:nth-of-type(2){
          position:absolute;
          top:0.04rem;
          left:1rem;
          width:0.3rem;
          height:0.2rem;
          border-radius:5px;
          font-size:0.1rem;
          line-height:0.2rem;
          text-align:center;
          background-color:#1ddd8f;
          color:#fff;
          }
     }
     p{
          position:absolute;
          top:0.3rem;
          left:0.05rem;
          color:#444;
     }
}
.btn{
     position: relative;
     width:3.75rem;
     height:0.6rem;
     p{
          border-radius:50px;
          width:1.5rem;
          height:0.4rem;
          font-size:0.16rem;
          text-align:center;
          line-height:0.4rem;
          background-color:#1ddd8f;
          color:#fff;
          &:nth-of-type(1){
               position: absolute;
               top:0.15rem;
               left:0.2rem;
          }
          &:nth-of-type(2){
               position: absolute;
               top:0.15rem;
               left:2rem;
          }
     }
}
`
